<template>
	<div class="back_contain_n mine-account">
		<div class="leftList">
			<li v-for="(item,index) in paramList" :key="index"
				:class="{'active': viewType == item.key}"
				@click="changeView(item)"
			>
				<el-badge :value="item.num" class="item">
					<span>{{item.name}}</span>
				</el-badge>
			</li>
		</div>
		<div class="mainTable">
			<table-one v-if="viewType == 'sure'" ref="order_sure"></table-one>
			<table-two v-else-if="viewType == 'need'" :viewType="viewType"  ref="order_sure"></table-two>
			<table-three v-else :viewType="viewType"  ref="order_sure"></table-three>
		</div>
	</div>
</template>

<script>
	import tableOne from './table-one/index.vue'
	import tableTwo from './table-two/index.vue'
	import tableThree from './table-three/index.vue'

	export default {
		data() {
			return {
				viewType: 'sure',
				paramList: [
					{name: "规格确认", key: 'sure', tableType: '1', num: 0},
					{name: "订单需求", key: 'need', tableType: '2', num: 0},
					{name: "生产计划", key: 'plan', tableType: '2'},
					{name: "已完成", key: 'complete', tableType: '3'},
				],
			};
		},
		methods: {

			getOrderPlanNum() {
				let self = this;
				self.$http({
					url: "/jinl/order/getOrderPlanNum",
					method: "post",
				}).then(resp => {
					if (resp.success) {
						self.paramList[0].num = resp.result.sure;
						self.paramList[1].num = resp.result.paichang;
					}
				});
			},

			changeView(val) {
				let self = this;
				this.viewType = val.key;
				self.$nextTick(()=>{
					self.$refs.order_sure.init(val.tableType);
				})
			},
		},

		mounted(){
			let self = this;
			self.$eventBus.$on('getOrderPlanNum',function () {
				self.getOrderPlanNum();
			});
			self.getOrderPlanNum();
			self.changeView({key:self.viewType});
		},

		components: {tableOne, tableTwo, tableThree}
	};
</script>

<style lang="scss" scoped>
	.mine-account {
		.leftList {
			display: flex;
			margin-bottom: 15px;

			li {
				list-style: none;
				width: 100px;
				height: 30px;
				line-height: 28px;
				border-bottom: 1px solid #fff;
				color: #333;
				text-align: center;
				cursor: pointer;
				margin-bottom: 10px;
				transition: all .5s;
				position: relative;
				display: flex;
				justify-content: center;

				&.active {
					color: #ff9935;
					border-color: #ff9935;
					position: relative;
					font-weight: 600;
					font-size: 14px;
				}
			}
		}
	}
</style>
